<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
	    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	    <@cms_site id=siteId!'' >
		<@cms_channel id=businessId!'' >
			<meta name="keywords" content="${(site.keywords)!''},${(tag_bean.name)!''}" />
			<title>${(tag_bean.name)!''}</title>
		</@cms_channel>
		</@cms_site>
	    <link rel="stylesheet" href="${ctx}/css/wechat/phone.css" />
	    <link rel="stylesheet" href="${ctx}/css/wechat/style.css" />
	    <link rel="stylesheet" href="${ctx}/js/weui/css/jquery-weui.min.css" />
	    <link rel="stylesheet" href="${ctx}/js/weui/css/weui.min.css" />
	    <script type="text/javascript" src="${ctx}/js/wechat/jQuery.1.8.2.min.js" ></script>
	    <script type="text/javascript" src="${ctx}/js/wechat/height.js" ></script>
	    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" ></script>
	    <script type="text/javascript" src="${ctx}/js/weui/js/jquery-weui.min.js" ></script>
	    <script type="text/javascript" src="${ctx}/js/weui/js/city-picker.min.js" ></script>
	    <script type="text/javascript" src="${ctx}/js/jquery/jquery.form.js" ></script>
	    <style>
	    	body{
	    		background: url(${ctx}/img/wechat/jyxc_bgimg.jpg);
	    		background-size: 100% 100%;
	    		background-repeat: no-repeat;
	    		background-position: center;
	    	}
	    	.linear-gradients{
	    		background-image: -webkit-gradient(linear,100% 100%, 100% 0%, from(#42C2FF), to(#15A9FE), color-stop(0.5,#2CB6FE));
	    	}
	    	.boxShadow{-moz-box-shadow:0px 0px 10px #ABABAB; -webkit-box-shadow:0px 0px 10px #ABABAB; box-shadow:0px 0px 10px #ABABAB;}
	    </style>
	</head>
	<body>
		<div class="container-fluid">
			<div class="row">
				<div class="col12 l-ht0">
					<img src="${ctx}/img/wechat/jyxc_banner.jpg" class="per100" />
				</div>
			</div>
			<form id="submitForm" action="${ctx}/f/mp/${(siteId)!''}/${(businessId)!''}/comment/update" method="post">
				<div class="row base">
					<div class="col12">
						<div class="ht38 mt56">
							<div class="ht38 fl per40 tr pr16 font16 font-yahei font-b">
								<span class="font-red">*</span>姓名
							</div>
							<div class="ht38 fl per60 border-b-f4f4f5 pos-r">
								<input type="text" name="userName" id="informName" class="border-none font-6 ht18 font14" placeholder="请填写您的姓名" />
								<img src="${ctx}/img/wechat/yz_close.png" class="w-14 ht14 pos-a top4 right26 display-n" />
							</div>
						</div>
						<div class="ht56">
							<div class="ht56 pt18 fl per40 tr pr16 font16 font-yahei font-b">
								<span class="font-red">*</span>手机号码
							</div>
							<div class="ht56 pt18 fl per60 border-b-f4f4f5 pos-r">
								<input type="text" name="mobile" id="informNum" class="border-none font-6 ht18 font14" placeholder="请填写您的手机号码" />
								<img src="${ctx}/img/wechat/yz_close.png" class="w-14 ht14 pos-a top22 right26 display-n" />
							</div>
						</div>
					</div>
				</div>
				<div class="row suggest display-n">
					<div class="col12">
						<div class="ht38 mt56">
							<div class="ht38 fl per40 tr pr16 font16 font-yahei font-b">
								<span class="font-red">*</span>建议详述
							</div>
							<div class="ht38 fl per60 border-b-f4f4f5 font-9 font14 pos-r">
								<span class="msgCont">请在下方编写您的信件内容</span>
								<img src="${ctx}/img/wechat/yz_close.png" class="w-14 ht14 pos-a top4 right26 display-n" />
							</div>
						</div>
						<div class="pl28 pr28 overflow-h mt24 pos-r">
							<div class="ht12 font-9 pos-a left30 top4 font14 l-ht12 tipMsg">
								请在这里输入内容，限<span class="font-red">200</span>字
							</div>
							<textarea id="informCont" name="content" class="border-none ht160 l-ht20 font14 border-b-f4f4f5 font-6 per100" style="resize: none;"></textarea>
						</div>
					</div>
				</div>
			</form>
			<div class="row">
				<div class="col12 ht26 pl44 pr44 mt36">
					<div class="ht26 l-ht26 tc font-white per100 radius4 font-yahei btn linear-gradients next font12">下一步</div>
				</div>
				<div class="col12 ht26 pl44 pr44 per100 pos-a left0 bottom20 submit display-n">
					<div class="overflow-h ht26 linear-gradients radius4">
						<div class="ht26 l-ht26 tc font-white per45 fl font-yahei btn upstep font12">上一步</div>
						<div class="ht26 l-ht26 tc per5 fl font12 font-9">|</div>
						<div class="ht26 l-ht26 tc font-white per45 fl font-yahei btn font12" onclick="submitForm();">提交</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="ht44 w-44 radius-circle l-ht44 tc font12 boxShadow font-white linear-gradients pos-f bottom14 right24 btn">
			点我
		</div>
	</body>

	<script>
	$(function(){
		initClickHidenEven();
	})
	
	/*提交表单数据*/
	function submitForm(){
		var informCont=$("#informCont").val();
		if(informCont==''){
			$('.msgCont').text('信件内容不能为空').addClass('font-red');
			$('.msgCont').siblings().removeClass('display-n');
			return false;
		}else{
			console.log("ajax提交");
			jQuery.post($('#submitForm').attr('action'), $('#submitForm').serialize(),function(_json) {
				if (_json.status == "success") {
					$.alert("提交成功", function() {
						  //点击确认后的回调函数
					});
				} else {
					$.alert("提交失败", function() {
						  //点击确认后的回调函数
					});
				}
			});
			return false;
		}
	}
	
	function initClickHidenEven(){
		/*点击下一步效果*/
		$('div.next').bind('click',function(){
			var informName=$("#informName").val();
			var informSex=$("#informSex").val();
			var informNum=$("#informNum").val();
			var reg=/^1[34578]\d{9}$/;
			
			/*验证表单不能为空*/
			if(informName==''){
				$('#informName').val('姓名不能为空').addClass('font-red');
				$('#informName').siblings().removeClass('display-n');
			}else if(informNum==''){
				$('#informNum').val('手机号码不能为空').addClass('font-red');
				$('#informNum').siblings().removeClass('display-n');
			}else if(!reg.test(informNum)){
				$('#informNum').val('手机号码格式不正确').addClass('font-red');
				$('#informNum').siblings().removeClass('display-n');
			}else{
				$('div.base').hide();
				$('div.next').hide();
				$('div.suggest').removeClass('display-n');
				$('div.submit').removeClass('display-n');
				$('div.bottom14').hide();
			}
		});
		
		/*清空为空提示*/
		$('input').focus(function(){
			if($(this).hasClass('font-red')){
				$('input').removeClass('font-red');
				$(this).val('');
				$('img.right26').addClass('display-n');
			}
		});
		$('textarea').focus(function(){
			if($('.msgCont').hasClass('font-red')){
				$('.msgCont').removeClass('font-red');
				$('.msgCont').text('请在下面编辑您的信件内容');
				$('img.right26').addClass('display-n');
			}
		});	
		
		/*点击上一步效果*/
		$('div.upstep').bind('click',function(){
			$('div.base').show();
			$('div.next').show();
			$('div.suggest').addClass('display-n');
			$('div.submit').addClass('display-n');
			$('div.bottom14').show();
		});
		
		$('textarea').focus(function(){
			$('.tipMsg').hide();
		});
	}
	</script>

</html>